<template>
  <div class="app-container">

<!--    <div class="dashboard-container">-->
<!--      <div class="dashboard-text">name:{{ name }}</div>-->
<!--      <div class="dashboard-text">roles:<span v-for="role in roles" :key="role">{{ role }}</span></div>-->
<!--    </div>-->
    <div class="chart-container">
      <div id="chart" class="chart" style="height:600px;width: 95%;margin-left: 20px;margin-top: 20px" />
    </div>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import echarts from 'echarts'
import staApi from '@/api/sta'


export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'name',
      'roles'
    ])
  },
  data() {
    return {
      chart: null,
      result: [],
      type: ['view_site_num','rate_num','give_like_num','article_read_num','video_view_num'],
      chartName: ['网页访问量折线图','网页评分数折线图','网页点赞数折线图','文章阅读量折线图','视频播放量折线图'],

      begin: '',
      end: '',
      today: {},
    }
  },

  mounted() {
    this.showChart()
  },
  created() {
    let moment = require('moment');
    moment.locale('zh-cn');
    let _today = moment();
    this.today.year = _today.format('yyyy'); /*现在的年*/
    this.today.date = _today.format('YYYY-MM-DD'); /*现在的时间*/
    this.today.yesterday = _today.subtract(1, 'days').format('YYYY-MM-DD'); /*前一天的时间*/
    this.today.seven = _today.subtract(7, 'days').format('YYYY-MM-DD'); /*前一天的时间*/
    this.begin = this.today.seven
    this.end = this.today.end

  },

  methods:{
    showChart() {
      staApi.showDataByIndex(this.begin,this.end)
        .then(response => {
          this.result = response.data.analysisList
          console.log("===========返回结果============")
          console.log(response.data.analysisList)
          console.log(this.result)
          this.$notify({
            title: '提示',
            message: '查询到'+ this.result[0].length +'条数据',
            type: 'success'
          });
          this.setChart()
        })
    },

    // 设置图标参数
    setChart() {
      // 基于准备好的dom，初始化echarts实例
      this.chart = echarts.init(document.getElementById('chart'))

      // 指定图表的配置项和数据
      let option = {
        title: {
          text: '网站信息折线图'
        },
        tooltip: {
          trigger: 'axis'
        },
        //区域放大
        dataZoom: [{
          show: true,
          height: 30,
          xAxisIndex: [
            0
          ],
          bottom: 30,
          start: 10,
          end: 80,
          handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
          handleSize: '110%',
          handleStyle: {
            color: '#d3dee5'
          },
          textStyle: {
            color: '#fff'
          },
          borderColor: '#90979c'
        },
          {
            type: 'inside',
            show: true,
            height: 15,
            start: 1,
            end: 35
          }],
        legend: {
          data: this.chartName
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.result[5]
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: this.chartName[0],
            type: 'line',
            stack: 'Total',
            data: this.result[0]
          },
          {
            name: this.chartName[1],
            type: 'line',
            stack: 'Total',
            data: this.result[1]
          },
          {
            name: this.chartName[2],
            type: 'line',
            stack: 'Total',
            data: this.result[2]
          },
          {
            name: this.chartName[3],
            type: 'line',
            stack: 'Total',
            data: this.result[3]
          },
          {
            name: this.chartName[4],
            type: 'line',
            stack: 'Total',
            data: this.result[4]
          }
        ]
      }
      this.chart.setOption(option)
    }

  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
